Прозрачный угол для каринки

92ave · March 1, 2011

Сейчас создаю дизайн, задумался смогу ли я это реализвать.

Есть объект, он статической высоты стической ширины, вот его фрагмент:

Красным выделена своеобразная рамка, в правой части будет текст поэтому там опросов особо то и нету.

А что касается картинки, я хочу сделать так, чтобы пользователь заморачивался лишь о высоте картинки и ни в коем случае вручную не обрезал уголки.

Тоесть как сделать посредством css и html так, чтобы картинка в div с определенным классом сама себе обрезала уголки в нужном месте?

Например вот этак картинка:

Нужно чтобы когда её вставили в ДИВ получилось вот так:

На что способен я, вы можете видеть в первом изображении.

Идеи:

Текст будет на фоне каком-то, следовательно можно ЛЕВЫЙ угол картинки затмить этим самым фоном текста, но с правым углом не проканает... потомучто фон самого сайта он не монохромный...

Scrum · March 1, 2011

Сейчас Макс тебе посоветует вырезать отверстие и подложить картинки под бг.

92ave · March 1, 2011

Сейчас Макс тебе посоветует вырезать отверстие и подложить картинки под бг.

Если я правильно понял, что мне сейчас посоветуют, то заранее вопрос: как я отверстие это прорублю? мне фон справа нельзя затмевать тот фон где темносиние кругляшки, они по всему фону в разнобой, а блоков с таим треугольников вовсе не один будет, так что я впринцепи не могу вырезать отвертсие

Scrum · March 1, 2011

Тогда только резать картинки.

SelenIT · March 1, 2011

Можно еще в сторону SVG/Canvas посмотреть...

psywalker · March 1, 2011

Если я правильно понял, что мне сейчас посоветуют, то заранее вопрос: как я отверстие это прорублю? мне фон справа нельзя затмевать тот фон где темносиние кругляшки, они по всему фону в разнобой, а блоков с таим треугольников вовсе не один будет, так что я впринцепи не могу вырезать отвертсие

Придётся бордер такой вот треугольный класть картинкой сверху на фон, мотоцикла. А на всё это уже сверху другой слой с чем угодно.

92ave · March 1, 2011

Спасибо, в итоге решил отказаться от этих ухищрений)

psywalker · March 1, 2011

Спасибо, в итоге решил отказаться от этих ухищрений)

Ну и пральна

swetlana · March 1, 2011

как же?

в эпоху css3?

про rotation забыли?

psywalker · March 1, 2011

как же?
в эпоху css3?
про rotation забыли?

Светка, а всё равно во-первых это заморочка, уж лучше отказаться правда. А потом ведь ИЕ8 так же в обломе, а тут смысла нет. Но если ты сделаешь пример, я был бы не против

Scrum · March 1, 2011

Это же вроде для поворотов.

psywalker · March 1, 2011

Кстати я ещё идею тут придумал. Можно сделать фон отдельно, а кругляшки тоже, в пнг и их тупо сверху набросать на основной правый фон.

SelenIT · March 1, 2011

Насколько я понял, проблема именно в необходимости показывать треугольный огрызок картинки на произвольном месте заранее неизвестного фона. Иначе задача и впрямь тривиально решается наложением маски с дыркой...

swetlana · March 1, 2011

Светка, а всё равно во-первых это заморочка

заморочка, да.

уж лучше отказаться правда

если можно что-то не делать, то этого делать не следует.

хм… где-то я такое уже слышала.

А потом ведь ИЕ8 так же в обломе, а тут смысла нет. Но если ты сделаешь пример, я был бы не против

сделать можно.

msdn рулит.

Но лениииииво!

Scrum · March 1, 2011

дыркой...

Фи.. технологическим отверстием

Scrum · March 1, 2011

как же?
в эпоху css3?
про rotation забыли?

заморочка, да.

Что то у меня не вяжется идея. В чем принцип на словах поясните.

swetlana · March 1, 2011

прикрыть часть картинки повёрнутым под углом блоком.

Scrum · March 1, 2011

прикрыть часть картинки повёрнутым под углом блоком.

В принципе так и думал, но мне показалось что картинки не обрежутся.

swetlana · March 1, 2011

картинки не обрежутся, но заслонятся.

Scrum · March 1, 2011

Эм ну у меня обрезались ))

Примерно что-то такое получилось, с непонятными подгонами.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html,body {
    margin: 20px;
  }
  #rotate {
    border: 1px solid olive;
    width: 200x;
    height: 200px;
    overflow: hidden;

  }
  #image {
    width: 200px;
    height: 200px;
    margin: 100px 0 0 50px;
    border: 1px solid #000;
    overflow: hidden;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  #image img {
    width: 300px;
    height: 200px;
    margin: -60px 0 0 -110px;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(45deg);
  }


  /*]]>*/
  </style>
</head>

<body>
    <div id="rotate">
        <div id="image"><img src="images/slaydshou/1.jpg" /></div>
    </div>
</body>

</html>

mishka · March 1, 2011

прикрыть часть картинки повёрнутым под углом блоком.

Свет, респект и уважуха

проверяйте http://zalil.ru/30596760

До кроссбраузерности нужно допилить, но тем не менее...

Я конечно применил jQuery, но как по мне результат того стоил ))

Чет поспешил выложить. Использование jQuery поидее должно было обеспечить кросс, но чтото оно в ие6-8 вообще не в ту степь (((

Буду разбираться

mishka · March 1, 2011

ну вобщем вот http://zalil.ru/30596875

ие6-8 идут лесом ((

Ну неможет летать рожденный ползать

А может кто придумает чего?

и как можно записать такое вот покороче?

figure {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: block;


	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform-origin: -16px 226px;
	-moz-transform-origin: -16px 226px;
	-o-transform-origin: -16px 226px;
	-webkit-transform-origin: -16px 226px;
}

Serlutin · March 1, 2011

Вот пожалуйста: http://serlutin.nxt.ru/example/triangle.html

IE6-7 идут лесом, либо оборачиваем в ещё два контейнера.

Выглядит коряво, так как лень, выравнивать. Возможно нужно задать ещё отступы картинке, либо обернуть в ещё одни контейнер. Однако задачу топикстартера это не решает, к сожалению.

swetlana · March 1, 2011

ие6-8 идут лесом ((

да нет же…

могут они.

По крайней мере должны мочь.

эх, вот времени сейчас не шибко много.

Если не забуду, через два-три дня сделаю.

Но суть именно та. И развить эту идею можно ещё как угодно.

mishka · March 2, 2011

ну вобщем вот что получил: http://zalil.ru/30599214

ие6-7 норм работает, только я не совсем понял как рассчитывать отступы, поэтому подбирал.

ие8 - отказывается напрочь нормально работать. Уже и в режим эмуляции ие7 его переводил (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />) - никак, и доктайп XHTML Strict ставил ( и стекло протирал, и по колесу стучал )

Вот если в браузере кликнуть на режим отображения ие7 - то правильно ведет себя.

Кто ие8 победит?

swetlana · March 2, 2011

да! Именно это и имелось в виду.

для IE8 по идее свойство должно быть -ms-filter

Sign In

Прозрачный угол для каринки

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information